<template>
  <span class="btn1" :style="btnStyle">
      <slot>按钮</slot>
  </span>
</template>
<script>
module.exports = {
  props:{
    noactivecolor:{
      type:String,
      default:"#333333"
    },
    activecolor:{
      type:String,
      default: "#8C8B8B"
    },
    status:{
      type:[Number,Boolean],
      default:0
    },
    height:{
      type:String,
      default:".8rem"
    },
    width:{
      type:String,
      default:"1.6rem"
    },
    fontSize:{
      type:String,
      default:".37rem"
    }
  },
  data(){
    return {
      dstatus:this.status
    }
  },
  methods:{
    setStatus(v){
      this.dstatus = v
    }
  },
  watch:{
    status(n){
      this.dstatus = n
    }
  },
  computed:{
    btnStyle(){
      let _this = this
      return {
        color: _this.dstatus?_this.activecolor:_this.noactivecolor,
        width: _this.width,
        height: _this.height,
        overflow: "hidden",
        fontSize: _this.fontSize
      }
    }
  }
}
</script>
<style scoped>
.btn1{
  padding: .1rem .3rem;
  border: 1px solid rgba(140, 139, 139, 100);
  border-radius: 5px;
}
</style>
